<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>123</title>
	<style>
		.box1 {
			width: 120px;
			height: 120px;
			background-color: red;
			border-radius: 50%;
		}

		.box2 {
			width: 120px;
			height: 60px;
			background-color: green;
			border-radius: 120px 120px 0 0;
		}

		.box3 {
			width: 60px;
			height: 120px;
			background-color: pink;
			border-radius: 120px 0 0 120px;
		}

		.box4 {
			width: 120px;
			height: 120px;
			background-color: gray;
			border-radius: 120px 0 0 0;
		}

		.box5 {
			width: 120px;
			height: 120px;
			border-radius: 120px 0 0 0;
			border-left: 5px solid blue;
		}

		.box6 {
			width: 120px;
			height: 120px;
			border-radius: 120px 0 0 0;
			border-top: 5px solid blue;
		}

		.box7 {
			width: 120px;
			height: 120px;
			border-radius: 100%;
			border: 5px solid blue;
		}

		.box8 {
			width: 150px;
			height: 100px;
			border-top-left-radius: 150px 150px;
			border-top-right-radius: 300px 150px;
			border-bottom-left-radius: 150px 150px;
			border-bottom-right-radius: 300px 150px;
			border: 5px solid blue;
		}

		.box9 {
			width: 0;
			border: 200px solid transparent;
			border-left: 200px solid gold;
			border-top: 200px solid gold;
			border-bottom: 200px solid gold;
			border-radius: 200px;
		}

		.circle1,
		.circle2,
		.circle3,
		.circle4,
		.circle5 {
			position: absolute;
			width: 100px;
			height: 100px;
			border: 10px solid black;
			border-radius: 50%;
			margin-left: 200px;
		}

		.circle1 {
			border-color: blue;
			left: 0;
			top: 0;
		}

		.circle2 {
			border-color: burlywood;
			left: 130px;
			top: 0;
			z-index: 3;
			/*使这个黄色的circle放在上面*/
		}

		.circle3 {
			border-color: red;
			left: 260px;
			top: 0;
		}

		.circle4 {
			border-color: palegreen;
			left: 65px;
			top: 60px;
		}

		.circle5 {

			border-color: purple;
			left: 196px;
			top: 60px;
		}
	</style>
</head>

<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="box5"></div>
	<div class="box6"></div>
	<div class="box7"></div>
	<div class="box8"></div>
	<div class="box9"></div>
	<div class="box10">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
		<div class="circle5"></div>
	</div>
</body>

</html>